
<div class="flatTupo machine-flat-monitoring">
    <el-row style="height: 100%;" v-if="flats.length>0">
        <el-col :span="12" style="height: 100%" class="side">
            <div class="gp">
                <el-row style="height: 25%;" type="flex" justify="center">
                    <el-col :span="8"  :class="getClass(flats[0]) +' flat'">
                        {{flats[0].gpName}}
                       <div class="icon"><div class="icon-container">
                            <div class="webicon" style=""></div>
                        </div>
                       </div>
                        <!--{{flats[0].currentFlight?flats[0].currentFlight.flightNum}}-->
                    </el-col>
                    <el-col :span="8"  :class="getClass(flats[1]) +' flat'">
                        {{flats[1].gpName}}
                       <div class="icon"><div class="icon-container">
                            <div class="webicon" style=""></div>
                        </div></div>
                    </el-col>
                </el-row>
                <el-row style="height: 25%;" type="flex" justify="center">
                    <el-col :span="8"  :class="getClass(flats[2]) +' flat'">
                        {{flats[2].gpName}}
                       <div class="icon"><div class="icon-container">
                            <div class="webicon" style=""></div>
                        </div></div>
                    </el-col>
                    <el-col :span="8"  :class="getClass(flats[3]) +' flat'">
                        {{flats[3].gpName}}
                       <div class="icon"><div class="icon-container">
                            <div class="webicon" style=""></div>
                        </div></div>
                    </el-col>
                </el-row>
                <div style="text-align: center;"><span>{{flats[0].apron}}</span></div>
            </div>
            <div class="gp">
                <el-row style="height: 25%;" type="flex" justify="center">
                    <el-col :span="8"  :class="getClass(flats[4]) +' flat'">
                        {{flats[4].gpName}}
                       <div class="icon"><div class="icon-container">
                            <div class="webicon" style=""></div>
                        </div></div>
                    </el-col>
                    <el-col :span="8"  :class="getClass(flats[5]) +' flat'">
                        {{flats[5].gpName}}
                       <div class="icon"><div class="icon-container">
                            <div class="webicon" style=""></div>
                        </div></div>
                    </el-col>
                </el-row>
                <el-row style="height: 25%;" type="flex" justify="center">
                    <el-col :span="8"  :class="getClass(flats[6]) +' flat'">
                        {{flats[6].gpName}}
                       <div class="icon"><div class="icon-container">
                            <div class="webicon" style=""></div>
                        </div></div>
                    </el-col>
                    <el-col :span="8"  :class="getClass(flats[7]) +' flat'">
                        {{flats[7].gpName}}
                       <div class="icon"><div class="icon-container">
                            <div class="webicon" style=""></div>
                        </div></div>
                    </el-col>
                </el-row>
                <div style="text-align: center;"><span>{{flats[4].apron}}</span></div>
            </div>
        </el-col>
        <el-col :span="12" style="height: 100%">
            <div class="gp">
                <el-row style="height: 25%;" type="flex" justify="center">
                    <el-col :span="8"  :class="getClass(flats[8]) +' flat'">
                        {{flats[8].gpName}}
                       <div class="icon"><div class="icon-container">
                            <div class="webicon" style=""></div>
                        </div></div>
                    </el-col>
                    <el-col :span="8"  :class="getClass(flats[9]) +' flat'">
                        {{flats[9].gpName}}
                       <div class="icon"><div class="icon-container">
                            <div class="webicon" style=""></div>
                        </div></div>
                    </el-col>
                </el-row>


                <el-row style="height: 25%;" type="flex" justify="center">
                    <el-col :span="8"  :class="getClass(flats[10]) +' flat'">
                        {{flats[10].gpName}}
                       <div class="icon"><div class="icon-container">
                            <div class="webicon" style=""></div>
                        </div></div>
                    </el-col>
                    <el-col :span="8"  :class="getClass(flats[11]) +' flat'">
                        {{flats[11].gpName}}
                       <div class="icon"><div class="icon-container">
                            <div class="webicon" style=""></div>
                        </div></div>
                    </el-col>
                </el-row>
                <div style="text-align: center;"><span>{{flats[8].apron}}</span></div>
            </div>

            <div class="gp">
                <el-row style="height: 25%;" type="flex" justify="center">
                    <el-col :span="8"  :class="getClass(flats[12]) +' flat'">
                        {{flats[12].gpName}}
                       <div class="icon"><div class="icon-container">
                            <div class="webicon" style=""></div>
                        </div></div>
                    </el-col>
                    <el-col :span="8"  :class="getClass(flats[13]) +' flat'">
                        {{flats[13].gpName}}
                       <div class="icon"><div class="icon-container">
                            <div class="webicon" style=""></div>
                        </div></div>
                    </el-col>
                </el-row>
                <el-row style="height: 25%;" type="flex" justify="center">
                    <el-col :span="8"  :class="getClass(flats[14]) +' flat'">
                        {{flats[14].gpName}}

                       <div class="icon"><div class="icon-container">
                            <div class="webicon" style=""></div>
                        </div></div>
                    </el-col>
                    <el-col :span="8"  :class="getClass(flats[15]) +' flat'">
                        {{flats[15].gpName}}
                       <div class="icon"><div class="icon-container">
                            <div class="webicon" style=""></div>
                        </div></div>
                    </el-col>
                </el-row>
                <div style="text-align: center;"><span>{{flats[12].apron}}</span></div>
            </div>
        </el-col>
    </el-row>


    <!--<el-row v-for="row ,i in flats">-->
        <!--<el-col v-for="column in row" v-if="column" :span ="baseNum*(column.maxX-column.minX+1)" style="border: solid 1px red;">-->
            <!--<el-row v-for="r in column.rows">-->
                <!--<el-col  v-for="c in r"   :span ="8" style="border: solid 1px;height: 20px;">-->
                    <!--{{c.apron}} ，{{c.px+" "+c.py }}-->
                <!--</el-col>-->
            <!--</el-row>-->
            <!--<div></div>-->
        <!--</el-col>-->

    <!--</el-row>-->
</div>